<template>
    <div class="user-profile">
        <el-card shadow="hover">
            <template #header>
                <h3>用户信息</h3>
            </template>
            <el-skeleton :rows="8" animated :loading="loading">
                <template #template>
                    <div class="skeleton-container">
                        <div class="skeleton-head-portrait">
                            <el-skeleton-item variant="image" class="image" />
                            <el-skeleton-item variant="h3" style="width: 50%" />
                        </div>
                        <div class="skeleton-intro">
                            <el-skeleton-item variant="p" style="width: 100%" />
                            <el-skeleton-item variant="p" style="width: 50%" />
                            <el-skeleton-item variant="p" style="width: 100%" />
                            <el-skeleton-item variant="p" style="width: 75%" />
                            <el-skeleton-item variant="p" style="width: 100%" />
                        </div>
                    </div>
                </template>
                <template #default>
                    <div class="skeleton-container">
                        <div class="skeleton-head-portrait">
                            <img :src="imgSrc" class="image">
                            <h3>林林七</h3>
                        </div>
                        <div class="skeleton-intro loading">
                            <p>{{ intro ? intro : '这家伙很懒没有留下任何痕迹。。。' }}</p>
                        </div>
                    </div>
                </template>
            </el-skeleton>
        </el-card>
        <el-card shadow="hover">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane v-for="item in content" :label="item.label" :name="item.name">
                    <el-scrollbar height="549px">
                        <component :is="item.component" @eidtUser="getUser()"/>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup>
import { ElCard, ElSkeleton, ElSkeletonItem, ElTabs, ElTabPane, ElScrollbar } from 'element-plus'
import { ref } from 'vue'
import TimeLine from '@/components/TimeLine.vue'
import UserEdit from '@/components/UserEdit.vue'

const activeName = ref('1')
let content = [
    {
        label: '时间线',
        name: '1',
        component: TimeLine
    },
    {
        label: '修改信息',
        name: '2',
        component: UserEdit
    }
]

let loading = ref(false) // true 加载中 false 加载完
let intro = ref('')
let imgSrc = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')

function getUser() {
    // 请求用户的方法
    console.log(1);
    
}
</script>

<style scoped>
.user-profile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

.user-profile>div {
    margin: 1%;
}

.user-profile>div:nth-child(1) {
    flex: 1;
}

.user-profile>div:nth-child(2) {
    flex: 2;
}

.skeleton-head-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 8%
}

.skeleton-intro {
    font-size: 16px;
}

.skeleton-intro.loading{
    text-indent: 32px;
}

.image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 8%;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
}

.content {
    padding: 1%;
}

@media screen and (max-width: 768px) {
    .user-profile {
        display: block;
    }
}
</style>